$calendar-color: #000000 !default;
$calendar-background: #ffffff !default;
$calendar-month-button-background: #bdc3c7 !default;
$calendar-month-button-icon-color: rgb(52, 73, 94) !default;
$calendar-day-selected-background: #e74c3c !default;
$calendar-day-hover-background: #bdc3c7 !default;
$calendar-day-in-range-background: #34495e !default;
$calendar-width: 280px !default;
$calendar-padding: 10px !default;
$cell-margin: 0 !default;
$cell-size: (($calendar-width - $calendar-padding * 2) / 7) - ($cell-margin * 2) - 1 !default;
$calendar-shadow: rgba($calendar-color, 0.25) 0 0 1em !default;

.rdr-DateRange {
    display: block;
    box-sizing: border-box;
    white-space: nowrap;
    border-radius: 2px;
    background: $calendar-background;
    box-shadow: $calendar-shadow;

    .rdr-Calendar {
        box-shadow: none;
    }
}

.rdr-Calendar {
    display: inline-block;
    box-sizing: border-box;
    width: $calendar-width;
    padding: $calendar-padding;
    white-space: normal;
    letter-spacing: 0;
    color: $calendar-color;
    border-radius: 2px;
    background: $calendar-background;
    box-shadow: $calendar-shadow;
}

.rdr-MonthAndYear-innerWrapper {
    font-size: 12px;
    line-height: 18px;
    box-sizing: border-box;
    height: 38px;
    padding: 10px 0;
    text-align: center;
}

.rdr-MonthAndYear-button {
    display: block;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin: 0 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    outline: none;
    background: $calendar-month-button-background;
    box-shadow: none;

    i {
        display: block;
        width: 0;
        height: 0;
        padding: 0;
        text-align: center;
        border-style: solid;
    }

    &.prev {
        float: left;

        i {
            margin: 0 0 0 1px;
            border-width: 4px 6px 4px 4px;
            border-color: transparent $calendar-month-button-icon-color transparent transparent;
        }
    }

    &.next {
        float: right;

        i {
            margin: 0 0 0 7px;
            border-width: 4px 4px 4px 6px;
            border-color: transparent transparent transparent $calendar-month-button-icon-color;
        }
    }
}

.rdr-WeekDay {
    font-size: 12px;
    font-weight: 600;
    line-height: $cell-size / 2;
    display: inline-block;
    box-sizing: border-box;
    width: $cell-size;
    height: $cell-size / 2;
    margin-bottom: 1px;
    text-align: center;
    letter-spacing: initial;
}

.rdr-Day {
    font-size: 12px;
    line-height: $cell-size;
    display: inline-block;
    box-sizing: border-box;
    width: $cell-size;
    height: $cell-size;
    cursor: pointer;
    transition: transform 0.1s ease;
    text-align: center;
    letter-spacing: initial;

    &.is-passive {
        cursor: normal;
        opacity: 0.4;
    }

    &.is-selected {
        color: $calendar-background;
        background: $calendar-day-selected-background;
    }

    &.is-inRange {
        color: $calendar-background;
        background: $calendar-day-in-range-background;
    }

    &:hover:not(.is-selected) {
        background: $calendar-day-hover-background;
    }
}
